// 自定义事件
// successFun() 点击同意按钮触发的事件
// errorFun() 点击驳回按钮触发的事件

let startX = 0
let moveX = 0
let moveDistanc = 0
let iconDistanc = 0
let iconOpacityDistanc = 0
let iconTopDistanc = 0
let iconMarginTopDistanc = 0

Component({
	options: {
		"styleIsolation": "apply-shared"
	},
	/**
	 * 组件的属性列表
	 */
	properties: {
    bodyData: {
      type: Array,
      value: [1,2]
    }
	},

	/**
	 * 组件的初始数据
	 */
	data: {
		bodyHeight: 0,
		translateX: 'translateX(0rpx)',
		transition: '',
		noWidth: 4,
		noHeight: 80,
		yesWidth: 4,
		yesHeight: 80,
		status: false,
		selectValue: true,
		iconMarginTop: -40,
		iconTop: 0,
		noOpacity: 1,
		yesOpacity: 1,
		iconImageScale: 'scale(0)',
		opacity: 0,
		errorLeft: '-60px',
		errorTop: '-60px',
		successLeft: '-60px',
		successTop: '-60px',
    scale: 'scale(1)',
    opacityBody: 1
	},
	/**
	 * 组件的方法列表
	 */
	methods: {
		// 点击通过按钮的函数
		successFun(){
			this.setData({
				successLeft: '40px',
        successTop: '40px',
        translateX: `translateX(-375px) scale(0.9, 0.9)`,
        opacityBody: 0,
			})
      const that = this
      this.animate('#successIcon', [
        {scale: [1, 1]},
        {scale: [0.9, 0.9]},
        {scale: [1, 1]}
      ], 400)
      setTimeout(function(){
        that.setData({
          translateX: 'translateX(0px) scale(0.9, 0.9)'
        })
      }, 300)
			setTimeout(function(){
				// 撤销
				that.setData({
					translateX: `translateX(0px) scale(1, 1)`,
					transition: `all 0.5s ease-in-out`,
					status: false,
					noWidth: 4,
					noHeight: 80,
					yesWidth: 4,
					yesHeight: 80,
					yesOpacity: 1,
					noOpacity: 1,
					iconMarginTop: -40,
					iconTop: that.data.bodyHeight / 2,
					iconImageScale: 'scale(0)',
					opacity: 0,
					successLeft: '-60px',
          successTop: '-60px',
          opacityBody: 1,
				})
      }, 600)
      this.triggerEvent('successFun', {}, {
        bubbles: true,
        composed: true
      })
		},
		// 点击不通过按钮的函数
		errorFun(){
			this.setData({
				errorLeft: '40px',
        errorTop: '40px',
        translateX: `translateX(375px) scale(0.9, 0.9)`,
        opacityBody: 0,
			})
      const that = this
      this.animate('#errorIcon', [
        {scale: [1, 1]},
        {scale: [0.9, 0.9]},
        {scale: [1, 1]}
      ], 400)
      setTimeout(function(){
        that.setData({
          translateX: 'translateX(0px) scale(0.9, 0.9)'
        })
      }, 300)
			setTimeout(function(){
				// 撤销
				that.setData({
					translateX: `translateX(0px) scale(1, 1)`,
					transition: `all 0.5s ease-in-out`,
					status: false,
					noWidth: 4,
					noHeight: 80,
					yesWidth: 4,
					yesHeight: 80,
					yesOpacity: 1,
					noOpacity: 1,
					iconMarginTop: -40,
					iconTop: that.data.bodyHeight / 2,
					iconImageScale: 'scale(0)',
					opacity: 0,
					errorLeft: '-60px',
          errorTop: '-60px',
          opacityBody: 1
				})
      }, 600)
      this.triggerEvent('errorFun', {}, {
        bubbles: true,
        composed: true
      })
		},
		// 手指按下
		handleTouchStart(event){
				startX = event.touches[0].clientX
				this.setData({
					transition: ''
				})
		},
		// 手指滑动
		handleTouchMove(event){
			moveX = event.touches[0].clientX
			moveDistanc = moveX - startX
			if(moveDistanc >= 48){
				moveDistanc = 48
			} else if(moveDistanc <= -48){
				moveDistanc = -48
			}
			iconDistanc = Math.abs(80 * (moveDistanc / 48))
			iconOpacityDistanc = Math.abs(moveDistanc / 48)
			iconTopDistanc = Math.abs((this.data.bodyHeight / 2) * (moveDistanc / 48))
			iconMarginTopDistanc = Math.abs(40 * (moveDistanc / 48))
			// moveDistanc 正值为驳回/向右， 负值为同意/向左
			if(!this.data.status){
				this.setData({
					translateX: `translateX(${moveDistanc}px)`,
					iconTop: (this.data.bodyHeight / 2) - iconTopDistanc,
					iconMarginTop: -40 + iconMarginTopDistanc,
					iconImageScale: `scale(${iconOpacityDistanc})`,
					opacity: iconOpacityDistanc
				})
				if(moveDistanc > 0){
					this.setData({
						noWidth: iconDistanc,
						yesOpacity: 1 - iconOpacityDistanc
					})
				} else {
					this.setData({
						yesWidth: iconDistanc,
						noOpacity: 1 -iconOpacityDistanc
					})
				}
			} else {
				if(this.data.selectValue){
					if(moveDistanc > 0){
						this.setData({
							translateX: `translateX(${moveDistanc - 48}px)`,
							yesWidth: 80 - iconDistanc,
							noOpacity: iconOpacityDistanc,
							iconTop: iconTopDistanc,
							iconMarginTop: -iconMarginTopDistanc,
							iconImageScale: `scale(${1 - iconOpacityDistanc})`,
							opacity: 1 - iconOpacityDistanc
						})
					}
				} else {
					if(moveDistanc < 0){
						this.setData({
							translateX: `translateX(${moveDistanc + 48}px)`,
							noWidth: 80 - iconDistanc,
							yesOpacity: iconOpacityDistanc,
							iconTop: iconTopDistanc,
							iconMarginTop: -iconMarginTopDistanc,
							iconImageScale: `scale(${1 - iconOpacityDistanc})`,
							opacity: 1 - iconOpacityDistanc
						})
					}
				}
			}
		},
		// 手指松开
		handleTouchEnd(){
			if(!this.data.status){
				if(moveDistanc >= 48){
					// 驳回
					this.setData({
            translateX: `translateX(48px)`,
            transition: `all 0.3s ease-in-out`,
						status: true,
						selectValue: false,
						noWidth: 80,
						noHeight: 80,
						yesOpacity: 0,
						iconMarginTop: 0,
						iconTop: 0,
						iconImageScale: 'scale(1)',
						opacity: 1
					})
				} else if(moveDistanc <= -48){
					// 同意
					this.setData({
            translateX: `translateX(-48px)`,
            transition: `all 0.3s ease-in-out`,
						status: true,
						selectValue: true,
						yesWidth: 80,
						yesHeight: 80,
						noOpacity: 0,
						iconMarginTop: 0,
						iconTop: 0,
						iconImageScale: 'scale(1)',
						opacity: 1
					})
				} else {
					// 撤销
					this.setData({
						translateX: `translateX(0px)`,
						transition: `all 0.3s ease-in-out`,
						status: false,
						noWidth: 4,
						noHeight: 80,
						yesWidth: 4,
						yesHeight: 80,
						yesOpacity: 1,
						noOpacity: 1,
						iconMarginTop: -40,
						iconTop: this.data.bodyHeight / 2,
						iconImageScale: 'scale(0)',
						opacity: 0
					})
				}
			} else {
				if(this.data.selectValue){
					if(moveDistanc > 0){
						// 撤销
						this.setData({
							translateX: `translateX(0px)`,
							transition: `all 0.3s ease-in-out`,
							status: false,
							noWidth: 4,
							noHeight: 80,
							yesWidth: 4,
							yesHeight: 80,
							yesOpacity: 1,
							noOpacity: 1,
							iconMarginTop: -40,
							iconTop: this.data.bodyHeight / 2,
							iconImageScale: 'scale(0)',
							opacity: 0
						})
					}
				} else {
					if(moveDistanc < 0){
						// 撤销
						this.setData({
							translateX: `translateX(0px)`,
							transition: `all 0.3s ease-in-out`,
							status: false,
							noWidth: 4,
							noHeight: 80,
							yesWidth: 4,
							yesHeight: 80,
							yesOpacity: 1,
							noOpacity: 1,
							iconMarginTop: -40,
							iconTop: this.data.bodyHeight / 2,
							iconImageScale: 'scale(0)',
							opacity: 0
						})
					}
				}
			}
		}
	},
	ready(){
		const that = this
		const query = this.createSelectorQuery()
		query.select('#infoBody').boundingClientRect()
		query.selectViewport().scrollOffset()
		query.exec(function(res){
			that.setData({
				bodyHeight: res[0].height,
				iconTop: res[0].height / 2
			})
		})
	}
})
